<template>
  <div class="dashboard-container">
    <span>API接口开放平台</span>
    <el-table
      class="el-table-style"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="接口名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="description"
        label="接口描述">
      </el-table-column>
      <el-table-column
        label="操作">
        <template>
          <el-link href="/">查看</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging-bar">
      <span class="demonstration">总数:{{total}}</span>
      <el-pagination
        class="page-pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data(){
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'getUser',
        description: '上海市普陀区金沙江路 1518 弄'
      }],
      currentPage:1,
      total:1000,
      pagesize:""
    }
  },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }

    },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>

.dashboard-container {
  width: 100%;
  height: 300px;
  margin-top: 20px;
  margin-left: 40px;
  .el-table-style{
    margin-top: 30px;
    font-size: 16px;
  }
  .paging-bar{
    margin-top: 20px;
    .demonstration{
      font-size: 15px;
      color:#545c64;
    }
    .page-pagination{
      display: inline-block;
      vertical-align: middle;
    }

  }

}

.dashboard-container span {
  font-size: 30px;
}

</style>
